/* Portfolio v3 Pass 2 — tag + HOME-like terminal + dashed summary + hint + archive buttons.
   Lives inside .about-view within the existing os-window shell (frame stays visible). */

body.asterrvn-portfolio-v3-active .asterrvn-home-overlay-root {
  display: none !important;
}

body.asterrvn-portfolio-v3-active .portfolio-clean-artboard,
body.asterrvn-portfolio-v3-active .portfolio-clean-back,
body.asterrvn-portfolio-v3-active .portfolio-clean-play-button,
body.asterrvn-portfolio-v3-active .portfolio-videos-editor {
  display: none !important;
}

/* Hide HOME hero + boot terminal; keep system illusion layer in about-view */
body.asterrvn-portfolio-v3-active .view[data-view="about"] .about-view > .hero,
body.asterrvn-portfolio-v3-active .view[data-view="about"] .about-view > .terminal {
  display: none !important;
}

body.asterrvn-portfolio-v3-active .view[data-view="about"] .about-view > .system-illusion-layer {
  display: block !important;
}

.portfolio-v3 {
  /* Center stack width 920px; stage spans full about-view for side media. */
  --portfolio-v3-main-width: 920px;
  --portfolio-v3-tag-band: 160px;
  --portfolio-v3-tag-terminal-gap: 28px;
  --portfolio-v3-frame-border: var(--line);
  --portfolio-v3-inner-pad-x: 32px;
  --portfolio-v3-terminal-summary-gap: 16px;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  pointer-events: auto;
}

.portfolio-v3__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 0 32px;
  box-sizing: border-box;
}

.portfolio-v3__side-media {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  height: auto;
  overflow: visible;
}

.portfolio-v3__side-media--left,
.portfolio-v3__side-media--right {
  top: 0;
}

.portfolio-v3__side-media-inner {
  width: 100%;
  line-height: 0;
}

.portfolio-v3__side-media-inner.is-mirrored {
  transform: scaleX(-1);
}

.portfolio-v3__side-media-video,
.portfolio-v3__side-media-img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.portfolio-v3__center {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--portfolio-v3-main-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Portfolio tag (alpha WebM on desktop, WebP on phone/PWA).
   Fixed band; the media (with its transparent top/bottom) overflows it. */
.portfolio-v3__tag {
  position: relative;
  width: 100%;
  height: var(--portfolio-v3-tag-band);
  margin-bottom: 0;
  overflow: visible;
}

.portfolio-v3__tag-media {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: min(var(--portfolio-v3-main-width), 100%);
  height: auto;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Terminal — HOME terminal width (920px), tight under the tag band */
.portfolio-v3__terminal {
  width: min(var(--portfolio-v3-main-width), 100%);
  margin: var(--portfolio-v3-tag-terminal-gap) auto 0;
}

/* !important: 30b css forces padding-right 357px (HOME head-portrait gutter) */
.portfolio-v3__terminal-body {
  min-height: 0;
  max-height: none;
  padding: 16px 22px 14px !important;
}

/* Dividers as dim hairlines (same pattern as HOME #termBody dividers),
   overriding 30a's bright rgba(255,255,255,0.42) !important text dividers */
.portfolio-v3__terminal-body .term-line.divider {
  font-size: 0 !important;
  line-height: 0 !important;
  height: 0;
  color: transparent !important;
  text-shadow: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 13px 0;
  overflow: hidden;
  white-space: nowrap;
}

/* Dashed summary window below terminal — same border family as .terminal frame */
.portfolio-v3__summary-window {
  width: min(var(--portfolio-v3-main-width), 100%);
  margin-top: var(--portfolio-v3-terminal-summary-gap);
  padding: 26px var(--portfolio-v3-inner-pad-x);
  border: 2px dashed var(--portfolio-v3-frame-border);
  background: #000;
  text-align: center;
  color: var(--text);
  font-family: var(--pixel-ru);
  font-size: 14px;
  line-height: 1.9;
  box-sizing: border-box;
}

.portfolio-v3__summary-window p {
  margin: 0 0 18px;
}

.portfolio-v3__summary-window p:last-child {
  margin-bottom: 0;
}

/* Hint line below dashed window */
.portfolio-v3__archive-hint {
  width: min(var(--portfolio-v3-main-width), 100%);
  margin-top: 26px;
  text-align: center;
  color: var(--text);
  font-family: var(--pixel-ru);
  font-size: 14px;
  line-height: 1.6;
}

/* Archive buttons — dark fill, gray border, blue text; row spans inner content width */
.portfolio-v3__archives {
  width: min(var(--portfolio-v3-main-width), 100%);
  margin-top: 22px;
  padding: 0 var(--portfolio-v3-inner-pad-x);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.portfolio-v3__archive-button {
  font-family: var(--pixel-en);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 10px 8px;
  white-space: nowrap;
  text-align: center;
  background: #000;
  border: 1px solid var(--portfolio-v3-frame-border);
  color: var(--accent-bright);
}

.portfolio-v3__archive-button:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--accent-bright);
}

/* Draft transform editor — sidebar #sidebarInlineEditBtn while Portfolio v3 open */
body.asterrvn-portfolio-v3-active .portfolio-v3-edit {
  display: none !important;
}

body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor {
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: none;
}

/* Keep sidebar clickable — only box/toolbar capture pointer events */

body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor .asterrvn-head-edit-box {
  position: fixed;
  border: 1px dashed var(--accent-bright);
  box-sizing: border-box;
  pointer-events: auto;
}

body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor .asterrvn-head-edit-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--accent-bright);
  background: rgba(42, 109, 255, 0.25);
  pointer-events: none;
}

body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor .asterrvn-head-edit-handle.tl { left: -6px; top: -6px; }
body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor .asterrvn-head-edit-handle.tr { right: -6px; top: -6px; }
body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor .asterrvn-head-edit-handle.bl { left: -6px; bottom: -6px; }
body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor .asterrvn-head-edit-handle.br {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
  pointer-events: auto;
}

body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor .asterrvn-head-edit-toolbar {
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--line);
  font-family: var(--pixel-en);
  font-size: 9px;
  pointer-events: auto;
}

body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor .asterrvn-head-edit-readout {
  color: var(--text-dim);
  padding: 0 6px;
  white-space: nowrap;
}

body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor .asterrvn-head-edit-toolbar button {
  font-family: inherit;
  font-size: inherit;
  padding: 3px 8px;
  background: #000;
  border: 1px solid var(--line);
  color: var(--text);
  cursor: url("../../refs/New-Cursor-Finger.png") 8 1, pointer;
}

body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor .asterrvn-head-edit-toolbar button.active,
body.asterrvn-portfolio-v3-active .portfolio-v3-transform-editor .asterrvn-head-edit-toolbar button.target.active {
  border-color: var(--accent);
  color: var(--accent-bright);
}

@media (max-width: 640px) {
  .portfolio-v3 {
    --portfolio-v3-tag-band: 84px;
    --portfolio-v3-tag-terminal-gap: 18px;
  }

  .portfolio-v3__terminal-body {
    padding: 12px 14px 16px !important;
    font-size: 11px;
  }

  .portfolio-v3__summary-window,
  .portfolio-v3__archive-hint {
    font-size: 12px;
  }

  .portfolio-v3__archive-button {
    font-size: 9px;
    padding: 8px 4px;
  }

  .portfolio-v3__archives {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .portfolio-v3__side-media {
    display: none;
  }
}