/**
 * @file portfolio.css
 * @description Styles for the Portfolio view — builder wizard (.portfolio-container
 *   column) and full-bleed public viewer (.portfolio-viewer-full).
 * @usage Loaded by spa.html; classes consumed by public/views/portfolio.js.
 * @version-history
 *   v1.1.0 — 2026-07-03 — Full-bleed public viewer: .portfolio-viewer-full column fills
 *     the viewport below the nav, slim toolbar, iframe flexes to remaining height.
 *   v1.0.0 — 2026-03-06 — Initial portfolio builder + viewer styles.
 */

/* ── Portfolio View ────────────────────────────────────── */

.portfolio-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ── Builder Wizard ── */
.portfolio-builder {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.portfolio-step {
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
  padding: 1.5rem;
}

.portfolio-step h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  color: var(--text, #1A1A2E);
}

.portfolio-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent, #7c5cff);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  margin-right: 0.5rem;
}

/* ── Content Checkboxes ── */
.portfolio-source-group {
  margin-bottom: 1.5rem;
}

.portfolio-source-group summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text, #1A1A2E);
  padding: 0.5rem 0;
  user-select: none;
}

.portfolio-source-group summary::marker {
  color: var(--accent, #7c5cff);
}

.portfolio-source-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0 0.5rem 1.5rem;
}

.portfolio-source-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s;
}

.portfolio-source-item:hover {
  background: rgba(232,86,74,0.04);
}

.portfolio-source-item label {
  cursor: pointer;
  color: var(--text, #1A1A2E);
  font-size: 0.9rem;
}

.portfolio-source-item input[type="checkbox"] {
  accent-color: var(--accent, #7c5cff);
  width: 16px;
  height: 16px;
}

.portfolio-img-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #E5E7EB;
  flex-shrink: 0;
  background: #F3F4F6;
}

.portfolio-img-item {
  padding: 0.25rem 0.5rem;
}

.portfolio-img-item label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-source-meta {
  font-size: 0.75rem;
  color: var(--text-dim, #6B7280);
  margin-left: auto;
  flex-shrink: 1;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

.portfolio-mem-item {
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s;
}

.portfolio-mem-item:hover {
  background: rgba(232,86,74,0.04);
}

.portfolio-mem-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.portfolio-mem-header label {
  cursor: pointer;
  color: var(--text, #1A1A2E);
  font-size: 0.9rem;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.portfolio-mem-preview {
  margin: 0.25rem 0 0 1.75rem;
  font-size: 0.8rem;
  color: var(--text, #6B7280);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Style Selector ── */
.portfolio-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

.portfolio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.portfolio-option:hover {
  border-color: var(--accent, #7c5cff);
}

.portfolio-option.selected {
  border-color: var(--accent, #7c5cff);
  background: rgba(124,92,255,0.06);
}

.portfolio-option input[type="radio"] {
  accent-color: var(--accent, #7c5cff);
}

/* ── Auth Gate Section ── */
.portfolio-auth-gates {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

/* ── Prompt Output ── */
.portfolio-prompt-output {
  position: relative;
  background: var(--code-bg, #F3F4F6);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  padding: 1rem;
  max-height: 300px;
  overflow-y: auto;
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--text-dim, #6B7280);
}

.portfolio-prompt-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* ── Instructions ── */
.portfolio-instructions {
  background: rgba(124,92,255,0.05);
  border: 1px solid rgba(124,92,255,0.12);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}

.portfolio-instructions ol {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.portfolio-instructions li {
  margin-bottom: 0.4rem;
  color: var(--text-dim, #6B7280);
  font-size: 0.9rem;
}

/* ── Public Viewer ── */
.portfolio-viewer {
  min-height: 60vh;
}

/* Full-bleed published-portfolio view: a flex column that fills the viewport
   below the sticky nav; the iframe takes all remaining height and the
   portfolio scrolls inside it. */
.portfolio-viewer-full {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--nav-height, 64px));
  height: calc(100dvh - var(--nav-height, 64px));
}

.portfolio-viewer-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.45rem 1rem;
}

.portfolio-viewer-owner {
  color: var(--text-dim, #6B7280);
  font-size: 0.9rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-viewer-fs {
  margin-left: auto;
}

.portfolio-viewer-frame {
  width: 100%;
  border: none;
  border-radius: 8px;
  min-height: 70vh;
  background: #fff;
}

/* Keep after the base .portfolio-viewer-frame rule — same specificity,
   the override must win in the cascade. */
.portfolio-viewer-frame-full {
  flex: 1;
  min-height: 0;
  border-radius: 0;
}

.portfolio-not-found {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-dim, #6B7280);
}

.portfolio-not-found h2 {
  color: var(--text, #1A1A2E);
  margin-bottom: 0.5rem;
}

/* ── Promoted apps (public profile) ── */
.portfolio-profile-head {
  text-align: center;
  padding: 3rem 2rem 1rem;
  color: var(--text-dim, #6B7280);
}
.portfolio-profile-head h2 { color: var(--text, #1A1A2E); margin-bottom: 0.5rem; }
.portfolio-promoted {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem 1rem;
}
.portfolio-promoted-title {
  font-size: 1rem;
  color: var(--text, #1A1A2E);
  margin: 0 0 0.75rem;
}
.portfolio-promoted-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.portfolio-promoted-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: var(--card, #fff);
  transition: border-color 0.15s, transform 0.15s;
}
.portfolio-promoted-card:hover {
  border-color: var(--accent, #E8564A);
  transform: translateY(-1px);
}
.portfolio-promoted-name {
  font-weight: 700;
  color: var(--text, #1A1A2E);
  margin-bottom: 0.3rem;
}
.portfolio-promoted-pitch {
  font-size: 0.85rem;
  color: var(--text-dim, #6B7280);
  line-height: 1.4;
}

/* ── Upload Section ── */
.portfolio-upload-zone {
  border: 2px dashed var(--border, #E5E7EB);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.portfolio-upload-zone:hover,
.portfolio-upload-zone.dragover {
  border-color: var(--accent, #7c5cff);
  background: rgba(124,92,255,0.04);
}

.portfolio-upload-zone input[type="file"] {
  display: none;
}

.portfolio-paste-area {
  width: 100%;
  min-height: 120px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  background: var(--bg-card, #FFFFFF);
  color: var(--text, #374151);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  resize: vertical;
  transition: border-color 0.2s;
}
.portfolio-paste-area:focus {
  outline: none;
  border-color: var(--accent, #7c5cff);
}
.portfolio-paste-area::placeholder {
  color: var(--text-dim, #9CA3AF);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .portfolio-container {
    padding: 1rem;
  }
  .portfolio-options {
    grid-template-columns: 1fr;
  }
  .portfolio-prompt-actions {
    flex-direction: column;
  }
}

/* ── Builder workflow round (2026-06-10): flow banner, summaries, preview, publish bits ── */
.portfolio-subtitle-text { color: var(--text-dim); margin-bottom: 1rem; }
.portfolio-flow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .7rem 1rem; margin-bottom: 1.5rem; background: var(--bg-surface, var(--bg-dim)); border: 1px solid var(--border); border-radius: 10px; font-size: .88rem; color: var(--text); }
.portfolio-flow-num { font-weight: 700; margin-right: .25rem; }
.portfolio-flow-arrow { color: var(--text-dim); }
.portfolio-published-bar { margin-bottom: 1.5rem; padding: .75rem 1rem; background: rgba(80,200,120,.08); border: 1px solid rgba(80,200,120,.25); border-radius: 8px; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.portfolio-published-dot { color: var(--success-fg, #2E9E5B); }
.portfolio-published-link { margin-left: auto; }
.portfolio-group-checkall { margin-right: .65rem; cursor: pointer; accent-color: var(--accent, #E8564A); width: 15px; height: 15px; }
.portfolio-custom-desc { width: 100%; margin-top: .6rem; background: var(--control-bg, var(--card)); border: 1px solid var(--control-border, var(--border)); border-radius: 8px; padding: .5rem .65rem; color: var(--text); font: inherit; font-size: .88rem; resize: vertical; }
.portfolio-generate-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.portfolio-generate-hint { font-size: .82rem; color: var(--text-dim); }
.portfolio-prompt-meta { font-size: .76rem; color: var(--text-dim); margin: .35rem 0 .6rem; }
.portfolio-publish-target { font-size: .85rem; color: var(--text-dim); margin-bottom: .75rem; }
.portfolio-publish-url { font-family: monospace; word-break: break-all; }
.portfolio-paste-actions { display: flex; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }
.portfolio-badge-toggle { margin: -0.25rem 0 0.75rem; }
.portfolio-preview-frame { margin-top: .75rem; min-height: 420px; width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #fff; }