/* =========================================================
   EagleEase IT — PC Builder
   Dark, cinematic counterpart to the main site.
   ========================================================= */

.builder-page{
  --bg:        #08080a;
  --panel:     #101014;
  --panel-2:   #16161b;
  --line-dk:   #24242c;
  --line-dk-2: #2f2f39;
  --txt:       #f2f2f4;
  --txt-soft:  #9a9aa4;
  --txt-faint: #6a6a74;

  background: var(--bg);
  color: var(--txt);
  /* Locked to one viewport — nothing on this page scrolls except the two
     side panels. */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

/* --------------------------------------------------------- Header */
.builder-header{
  flex-shrink: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: .6rem clamp(1rem, 3vw, 2rem);
  background: rgba(8,8,10,.86);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--line-dk);
}
.builder-back{
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--txt);
  margin-right: auto;
}
.builder-back .icon{ color: var(--txt-soft); }
.builder-back:hover .icon{ color: var(--red-400); }
.builder-back .brand-word{ color: var(--txt); font-size: 1.02rem; }
.builder-title .eyebrow{ margin: 0; color: var(--red-400); }
.builder-total{ display: grid; justify-items: end; line-height: 1.15; }
.builder-total-label{ font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--txt-faint); }
.builder-total-value{ font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; }

/* --------------------------------------------------------- Shell */
.builder-shell{
  flex: 1;
  display: grid;
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr) minmax(320px, 380px);
  gap: 1px;
  background: var(--line-dk);
  min-height: 0;
}

/* --------------------------------------------------------- Step rail */
.step-rail{
  background: var(--panel);
  padding: var(--space-4) 0 var(--space-5);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.step-rail ul{ display: grid; }
.step{
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .72rem 1rem;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.step:hover{ background: rgba(255,255,255,.035); }
.step.is-active{
  background: rgba(182,34,44,.12);
  border-left-color: var(--red-500);
}
.step-mark{
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line-dk-2);
  position: relative;
  transition: all var(--dur-fast);
}
.step.is-done .step-mark{
  background: var(--red-500);
  border-color: var(--red-500);
}
.step.is-done .step-mark::after{
  content: "";
  position: absolute;
  left: 6px; top: 3px;
  width: 5px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.step-body{ display: grid; min-width: 0; flex: 1; }
.step-label{ font-family: var(--font-head); font-weight: 600; font-size: .9rem; }
.step-choice{
  font-size: .74rem;
  color: var(--txt-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step.is-done .step-choice{ color: var(--txt-soft); }
.step-price{ font-size: .76rem; color: var(--txt-soft); font-variant-numeric: tabular-nums; }

.rail-reset{
  margin: var(--space-5) 1rem 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .55rem;
  background: none;
  border: 1px solid var(--line-dk-2);
  border-radius: 999px;
  color: var(--txt-soft);
  font-size: .8rem;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.rail-reset:hover{ color: var(--txt); border-color: var(--red-500); }

/* --------------------------------------------------------- Stage */
.stage{
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(182,34,44,.10), transparent 62%),
    var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4) var(--space-6);
  overflow: hidden;
  min-height: 0;
}
.stage-glow{
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  top: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182,34,44,.16), transparent 68%);
  filter: blur(48px);
  pointer-events: none;
}
.stage-viewport{
  position: relative;
  width: 100%;
  max-width: 620px;
  max-height: 74vh;
  flex: 1;
  min-height: 0;
  margin-inline: auto;
}
#rigSvg{ width: 100%; height: 100%; overflow: visible; }
.rig3d{ position: absolute; inset: 0; }
.rig3d canvas{ display: block; width: 100% !important; height: 100% !important; border-radius: 12px; }

.stage-hud{
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: grid;
  gap: .35rem;
  padding: .7rem .9rem;
  background: rgba(16,16,20,.8);
  border: 1px solid var(--line-dk);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(6px);
}
.hud-row{ display: flex; gap: 1rem; justify-content: space-between; font-size: .74rem; }
.hud-label{ color: var(--txt-faint); text-transform: uppercase; letter-spacing: .07em; }
.hud-value{ font-family: var(--font-head); font-weight: 600; font-variant-numeric: tabular-nums; }

.stage-caption{
  margin-top: var(--space-4);
  font-size: .85rem;
  color: var(--txt-soft);
  text-align: center;
  position: relative;
  z-index: 4;
  flex-shrink: 0;
}

/* Subtle life in the rig */
.gpu-fan{ animation: eeSpin 4s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes eeSpin{ to{ transform: rotate(360deg); } }
.rgb-lit{ animation: eePulse 3.4s ease-in-out infinite; }
@keyframes eePulse{ 0%,100%{ opacity:.85 } 50%{ opacity:.45 } }
@media (prefers-reduced-motion: reduce){
  .gpu-fan, .rgb-lit{ animation: none; }
}

/* --------------------------------------------------------- Picker */
.picker{
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.picker-head{
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--line-dk);
}
.picker-title{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: .25rem;
}
.picker-sub{ font-size: .84rem; color: var(--txt-soft); }
.picker-list{
  padding: var(--space-4);
  display: grid;
  gap: .5rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.picker-empty{ color: var(--txt-soft); font-size: .9rem; padding: var(--space-4); }

.part-card{
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: .8rem .9rem;
  background: var(--panel-2);
  border: 1px solid var(--line-dk);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.part-card:hover{ border-color: var(--line-dk-2); transform: translateX(2px); }
.part-card.is-selected{
  border-color: var(--red-500);
  background: rgba(182,34,44,.10);
}
.part-card.is-blocked{ opacity: .5; }
.part-card.is-blocked:hover{ opacity: .75; }
.part-main{ display: grid; gap: .16rem; min-width: 0; flex: 1; }
.part-brand{
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--txt-faint);
}
.part-name{ font-family: var(--font-head); font-weight: 600; font-size: .89rem; line-height: 1.3; }
.part-spec{ font-size: .74rem; color: var(--txt-soft); }
.part-flag{ font-size: .72rem; color: var(--red-400); margin-top: .15rem; }
.part-card.is-caution .part-flag{ color: #e0a33a; }
.part-price{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------- Status bar */
.status-bar{
  position: relative;
  flex-shrink: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: .6rem clamp(1rem, 3vw, 2rem);
  background: rgba(8,8,10,.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-dk);
}
.status-summary{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .8rem .45rem .55rem;
  background: none;
  border: 1px solid var(--line-dk-2);
  border-radius: 999px;
  color: var(--txt);
  font-size: .85rem;
  cursor: pointer;
  margin-right: auto;
}
.status-summary:hover{ border-color: var(--txt-faint); }
.status-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--txt-faint);
  flex-shrink: 0;
}
.status-dot.is-ok{ background: #3ac06a; box-shadow: 0 0 0 3px rgba(58,192,106,.18); }
.status-dot.is-warn{ background: #e0a33a; box-shadow: 0 0 0 3px rgba(224,163,58,.18); }
.status-dot.is-error{ background: var(--red-450); box-shadow: 0 0 0 3px rgba(198,43,53,.2); }
.status-chevron{ width: 16px; height: 16px; color: var(--txt-faint); transition: transform var(--dur-fast); }
.status-summary[aria-expanded="true"] .status-chevron{ transform: rotate(180deg); }

.status-actions{ display: flex; align-items: center; gap: var(--space-5); }
.status-total{ display: grid; justify-items: end; line-height: 1.15; }
.status-total-label{ font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--txt-faint); }
.status-total-value{ font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.status-bar .btn-primary:disabled{ opacity: .4; cursor: not-allowed; box-shadow: none; }

/* Pops UP over the stage rather than growing the status bar, so the fixed
   single-screen layout is never pushed taller than the viewport. */
.issue-panel{
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 44vh;
  overflow-y: auto;
  padding: var(--space-4) clamp(1rem, 3vw, 2rem);
  background: rgba(8,8,10,.97);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-dk);
  box-shadow: 0 -20px 50px rgba(0,0,0,.5);
}
.issue-panel ul{ display: grid; gap: .4rem; }
.issue{
  font-size: .84rem;
  color: var(--txt-soft);
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border-left: 2px solid var(--line-dk-2);
}
.issue strong{ color: var(--txt); margin-right: .35rem; }
.issue.is-error{ border-left-color: var(--red-500); }
.issue.is-error strong{ color: var(--red-400); }
.issue.is-warn{ border-left-color: #e0a33a; }
.issue.is-warn strong{ color: #e0a33a; }
.issue.is-ok{ border-left-color: #3ac06a; }

/* --------------------------------------------------------- Modal */
.modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.modal[hidden]{ display: none; }
.modal-scrim{ position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.modal-card{
  position: relative;
  width: min(620px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-dk-2);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.modal-card h2{ font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; margin-bottom: .5rem; }
.modal-lede{ color: var(--txt-soft); font-size: .93rem; margin-bottom: var(--space-5); }
.modal-close{
  position: absolute;
  top: 1rem; right: 1rem;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--line-dk-2);
  border-radius: 50%;
  color: var(--txt-soft);
  cursor: pointer;
}
.modal-close:hover{ color: var(--txt); border-color: var(--red-500); }
.modal-close svg{ width: 17px; height: 17px; }

.build-summary{
  background: var(--panel-2);
  border: 1px solid var(--line-dk);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.summary-row{
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: .6rem;
  align-items: baseline;
  padding: .3rem 0;
  font-size: .84rem;
}
.summary-label{ color: var(--txt-faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.summary-name{ color: var(--txt); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.summary-price{ font-variant-numeric: tabular-nums; color: var(--txt-soft); }
.summary-total{
  border-top: 1px solid var(--line-dk);
  margin-top: .4rem;
  padding-top: .6rem;
  font-family: var(--font-head);
  font-weight: 700;
}
.summary-total .summary-price{ color: var(--txt); font-size: 1.05rem; }
.summary-note{ margin-top: .6rem; font-size: .74rem; color: var(--txt-faint); }

.modal-form{ background: none; border: none; padding: 0; }
.modal-form label{ color: var(--txt); }
.modal-form input, .modal-form select, .modal-form textarea{
  background: var(--panel-2);
  border-color: var(--line-dk-2);
  color: var(--txt);
}
.modal-form input:focus, .modal-form textarea:focus{
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(182,34,44,.22);
}

/* --------------------------------------------------------- Credit */
/* Thin strip pinned in the fixed layout so the ODC-By attribution stays
   visible without adding a scroll. */
.opendb-credit{
  flex-shrink: 0;
  padding: .4rem clamp(1rem, 3vw, 2rem);
  font-size: .68rem;
  line-height: 1.3;
  color: var(--txt-faint);
  text-align: center;
  background: var(--bg);
  border-top: 1px solid var(--line-dk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opendb-credit a{ color: var(--txt-soft); text-decoration: underline; }
.opendb-credit a:hover{ color: var(--red-400); }

/* --------------------------------------------------------- Responsive */
@media (max-width: 1180px){
  .builder-shell{ grid-template-columns: 210px minmax(0,1fr) 330px; }
}

@media (max-width: 960px){
  /* Stacked, but still one bounded screen: fixed stage + rail rows, and the
     picker takes the rest and is the only thing that scrolls. */
  .builder-shell{
    grid-template-columns: 1fr;
    grid-template-areas: "stage" "rail" "picker";
    grid-template-rows: 34vh auto minmax(0, 1fr);
  }
  .stage{ grid-area: stage; min-height: 0; padding: var(--space-3); }
  .step-rail{ grid-area: rail; }
  .picker{ grid-area: picker; }

  #rigSvg{ max-height: 30vh; }
  .stage-caption{ display: none; }

  /* Rail becomes a horizontal scroller */
  .step-rail{ padding: 0; overflow-x: auto; overflow-y: hidden; }
  .step-rail ul{ display: flex; }
  .step{
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    min-width: 148px;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: .6rem .9rem;
  }
  .step.is-active{ border-left-color: transparent; border-bottom-color: var(--red-500); }
  .step-price{ display: none; }
  .rail-reset{ display: none; }

  .picker-head{ padding: var(--space-3) var(--space-4); }
  .picker-title{ font-size: 1.1rem; }
  .stage-hud{ top: var(--space-3); right: var(--space-3); padding: .5rem .7rem; }
}

@media (max-width: 620px){
  .builder-header{ gap: var(--space-3); padding: .5rem 1rem; }
  .builder-back .brand-word{ display: none; }
  .status-bar{ gap: var(--space-3); padding: .5rem 1rem; }
  .status-total-label{ display: none; }
  .modal-card{ padding: var(--space-5); }
  .summary-row{ grid-template-columns: 72px 1fr auto; font-size: .8rem; }
}