/* Prediction Lab UX optimization: state hierarchy, readable controls, and
   progressive first-run disclosure. The established WTN palette is unchanged. */

body.predictionLabPage .plPanel.isPrimary{
  border-color:#3387b7;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(41,168,255,.12),
    0 12px 32px rgba(0,0,0,.2);
}
body.predictionLabPage .plPanel.isPrimary>.plSectionTitle>span{
  border-color:#42b5e9;
  background:#0e3550;
  color:#d9f4ff;
  box-shadow:0 0 14px rgba(41,168,255,.16);
}

body.predictionLabPage .plButton:disabled,
body.predictionLabPage button[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.48;
  filter:saturate(.45);
  box-shadow:none;
}

body.predictionLabPage .plFirstRunGuide{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:auto repeat(3,minmax(0,1fr)) auto;
  align-items:center;
  gap:10px;
  border:1px solid #244a65;
  border-radius:8px;
  padding:9px 11px;
  background:
    linear-gradient(100deg,rgba(17,51,73,.7),rgba(8,25,38,.94));
}
body.predictionLabPage .plFirstRunGuide__intro{max-width:210px}
body.predictionLabPage .plFirstRunGuide__intro strong{display:block;font-size:.78rem}
body.predictionLabPage .plFirstRunGuide__intro small{
  display:block;
  margin-top:2px;
  color:#9eb2c1;
  font-size:.67rem;
  line-height:1.35;
}
body.predictionLabPage .plFirstRunStep{
  display:grid;
  grid-template-columns:25px 1fr;
  gap:7px;
  align-items:center;
  min-width:0;
  padding:7px 8px;
  border-left:1px solid #24445c;
}
body.predictionLabPage .plFirstRunStep>span{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border:1px solid #2f7399;
  border-radius:50%;
  color:#89d7f5;
  font-size:.68rem;
  font-weight:850;
}
body.predictionLabPage .plFirstRunStep b{display:block;font-size:.7rem}
body.predictionLabPage .plFirstRunStep small{
  display:block;
  color:#8fa5b5;
  font-size:.64rem;
  line-height:1.25;
}
body.predictionLabPage .plFirstRunGuide[hidden]{display:none}

/* New visitors need the active experiment, not four large empty history cards. */
body.predictionLabPage .predictionLab .plControl:not(.isContextual){
  display:none!important;
}
/* Waiting keeps the full panel, but never exposes unearned results or rewards. */
body.predictionLabPage .plDebriefPlaceholder{display:none}
body.predictionLabPage .predictionLab[data-has-debrief="false"] .plDebrief{
  display:flex!important;flex-direction:column;height:auto!important;min-height:0;align-self:stretch;
}
body.predictionLabPage .predictionLab[data-has-debrief="false"] .plDebrief>:not(.plSectionTitle):not(.plDebriefPlaceholder),
body.predictionLabPage .predictionLab[data-has-debrief="false"] .plDebrief>.plSectionTitle p{display:none!important}
body.predictionLabPage .predictionLab[data-has-debrief="false"] .plDebrief>.plSectionTitle{margin-bottom:6px}
body.predictionLabPage .predictionLab[data-has-debrief="false"] .plDebriefPlaceholder{
  display:flex;flex-direction:column;flex:1;gap:14px;margin:10px 0 0;color:#a8bdcc;font-size:max(.8rem,12px);line-height:1.4;
}
body.predictionLabPage .plPanel [hidden]{display:none!important}
body.predictionLabPage #pl-record-details{margin-top:10px;text-align:left;font-size:.8rem}
body.predictionLabPage #pl-record-details select{max-width:100%;width:100%;margin:6px 0}
body.predictionLabPage #pl-method-chart table{width:100%;font-size:.8rem;text-align:left}
body.predictionLabPage #pl-method-chart{overflow:auto}
body.predictionLabPage .predictionLab[data-has-method-results="false"] .plBattleChart{display:none!important}
body.predictionLabPage .predictionLab[data-experience-state="build"] .plAchievements{
  margin-top:0;
}
body.predictionLabPage .predictionLab[data-experience-state="build"] .plControl.isContextual{
  grid-column:1/-1!important;
  grid-row:auto!important;
}

/* Operational text must remain readable even when the dashboard is dense. */
body.predictionLabPage .plSectionTitle p,
body.predictionLabPage .plComposer small,
body.predictionLabPage .plComplete small,
body.predictionLabPage .plControlToggle small,
body.predictionLabPage .plSubmitRow small,
body.predictionLabPage .plInsight p,
body.predictionLabPage .plLockedGrid aside p,
body.predictionLabPage .plSealed p,
body.predictionLabPage .plDebriefTop small,
body.predictionLabPage .plNext p,
body.predictionLabPage .plCenterNote{
  font-size:max(.68rem,11px)!important;
  line-height:1.35;
}
body.predictionLabPage .plStrategies button>small,
body.predictionLabPage .plRewardStrip small,
body.predictionLabPage .plXpSources small,
body.predictionLabPage .plTrackerList span,
body.predictionLabPage .plAchievementGrid small{
  font-size:max(.625rem,10px)!important;
  line-height:1.25;
}
body.predictionLabPage .plStrategies button>b,
body.predictionLabPage .plTabs button,
body.predictionLabPage .plButton{
  font-size:max(.7rem,11px)!important;
}

/* Ordinary laptop widths get two readable columns. The command-center
   three-column treatment is reserved for genuinely wide screens. */
@media (min-width:1281px) and (max-width:1499px){
  body.predictionLabPage .plDashboard{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    align-items:start;
    gap:9px;
  }
  body.predictionLabPage .plBuild{grid-column:1;grid-row:1}
  body.predictionLabPage .plFingerprint{grid-column:2;grid-row:1}
  body.predictionLabPage .plLocked{grid-column:1/-1;grid-row:2}
  body.predictionLabPage .plDebrief{grid-column:1;grid-row:3}
  body.predictionLabPage .plControl{grid-column:2;grid-row:3}
  body.predictionLabPage .plBattles{grid-column:1/-1;grid-row:4}
  body.predictionLabPage .plFirstRunGuide{grid-row:3}
  body.predictionLabPage .plAchievements{grid-column:1/-1;grid-row:5}
  body.predictionLabPage .plBuild,
  body.predictionLabPage .plFingerprint{height:100%}
  body.predictionLabPage .plLocked{height:auto}
  body.predictionLabPage .plLockedGrid{grid-template-columns:minmax(180px,.8fr) minmax(320px,1.5fr) minmax(180px,.8fr)}
  body.predictionLabPage .plStrategies button{min-height:54px}
}

@media (min-width:1500px){
  body.predictionLabPage .plFirstRunGuide{grid-row:2}
}

/* Auto-place first-run sections in a deliberate order. A visible battle panel
   must never share the achievements row, with or without a random control. */
@media (min-width:1281px){
  body.predictionLabPage .predictionLab[data-experience-state="build"] :is(.plFirstRunGuide,.plControl.isContextual,.plBattles,.plAchievements){
    grid-column:1/-1!important;
    grid-row:auto!important;
  }
  body.predictionLabPage .predictionLab[data-experience-state="build"] .plFirstRunGuide{order:1}
  body.predictionLabPage .predictionLab[data-experience-state="build"] .plControl.isContextual{order:2}
  body.predictionLabPage .predictionLab[data-experience-state="build"] .plBattles{order:3}
  body.predictionLabPage .predictionLab[data-experience-state="build"] .plAchievements{order:4}
}

/* Lower supporting panels get their own rows. Debrief placement is owned by
   prediction-lab-record.css in both waiting and evaluated states. */
@media (min-width:1281px){
  body.predictionLabPage .predictionLab[data-has-debrief="false"] :is(.plFirstRunGuide,.plControl.isContextual,.plBattles,.plAchievements){
    grid-column:1/-1!important;grid-row:auto!important;
  }
  body.predictionLabPage .predictionLab[data-has-debrief="false"] .plFirstRunGuide{order:2}
  body.predictionLabPage .predictionLab[data-has-debrief="false"] .plControl.isContextual{order:3}
  body.predictionLabPage .predictionLab[data-has-debrief="false"] .plBattles{order:4}
  body.predictionLabPage .predictionLab[data-has-debrief="false"] .plAchievements{order:5}
}

/* Keep the lifecycle artwork, but remove redundant empty-record scaffolding.
   Actual submitted, locked, and evaluated records retain their full treatment. */
body.predictionLabPage .predictionLab[data-has-record="false"] .plLockedGrid{
  grid-template-columns:minmax(0,1fr);flex:0;margin-top:4px;
}
body.predictionLabPage .predictionLab[data-has-record="false"] .plLockedGrid>aside,
body.predictionLabPage .predictionLab[data-has-record="false"] #pl-view-details{display:none}
body.predictionLabPage .predictionLab[data-has-record="false"] .plSealed{
  height:auto;min-height:0;padding:10px;
}
body.predictionLabPage .predictionLab[data-has-record="false"] .plSealed p{margin-bottom:6px}
body.predictionLabPage .predictionLab[data-has-record="false"] #pl-locked-balls{display:none}
body.predictionLabPage .predictionLab[data-has-record="false"] .plSealed h3{margin:4px 0}
body.predictionLabPage .predictionLab[data-has-record="false"] .plSeal{margin:0 0 4px}
body.predictionLabPage .predictionLab[data-has-record="false"] .plLocked{min-height:0;justify-content:flex-start;gap:0}

/* Source helpers overlay the composer, so explanations never stretch the panels.
   Anchor to the whole row to keep text within the panel at narrow widths. */
body.predictionLabPage .plBuild .plTabs{position:relative;grid-template-columns:repeat(3,minmax(0,1fr))}
body.predictionLabPage .plSourceOption{min-width:0}
body.predictionLabPage .plSourceOption button{width:100%;height:100%}
body.predictionLabPage .plSourceOption button:focus-visible{outline:2px solid #8bd7ff;outline-offset:2px}
body.predictionLabPage .plSourceHelp{
  position:absolute;top:100%;left:0;right:0;z-index:20;visibility:hidden;
  padding:10px 12px;border:1px solid #36759c;border-radius:6px;
  background:#102b3f;color:#e4eef5;box-shadow:0 6px 18px #0008;
  font-size:max(.8rem,12px);line-height:1.45;overflow-wrap:anywhere;
}
body.predictionLabPage .plSourceOption:not([data-help-dismissed]):is(:hover,:focus-within) .plSourceHelp{visibility:visible}
body.predictionLabPage .plTabs:has(.plSourceOption:hover) .plSourceOption:not(:hover) .plSourceHelp{visibility:hidden}

/* Workflow context stays in normal flow; no new dashboard columns or icon rules. */
body.predictionLabPage .plDraftContext{font-size:max(.75rem,12px);color:#b7ccd9;margin:8px 0 0;line-height:1.4}
body.predictionLabPage .plSubmitRow{flex-wrap:wrap}
body.predictionLabPage .plSubmitRow small{flex:1 1 180px;max-width:none;text-align:left}
body.predictionLabPage #pl-build-another{margin:6px}
body.predictionLabPage #pl-record-method{color:#b7ccd9;overflow-wrap:anywhere}
body.predictionLabPage .plBadgeStatus{display:block;font-style:normal;font-size:11px;line-height:1.4;color:#b7c6d0;margin-top:5px}
body.predictionLabPage .isUnlocked .plBadgeStatus{color:#74e2b3}
body.predictionLabPage .plAchievementGrid article{opacity:1}
body.predictionLabPage .plAchievementGrid b{font-size:13px;line-height:1.3}
body.predictionLabPage .plAchievementGrid small{font-size:12px!important;line-height:1.4;color:#a8bdcc}
body.predictionLabPage .plAchievementBottom h3{font-size:13px}
body.predictionLabPage .plGlance div{font-size:12px;line-height:1.4;gap:12px}
body.predictionLabPage .plProgressNote{font-size:12px;line-height:1.4;color:#a8bdcc;margin:4px 0 10px}
@media (min-width:1000px){
  body.predictionLabPage .plAchievements{grid-template-columns:minmax(0,1fr)}
  body.predictionLabPage .plAchievementGrid{grid-column:1/-1;grid-row:2;border-right:0;padding-right:0;gap:10px}
  body.predictionLabPage .plAchievementBottom{grid-column:1/-1;grid-row:3;margin-top:12px;padding-top:12px;border-top:1px solid #24445c}
}
@media (min-width:700px) and (max-width:999px){
  body.predictionLabPage .plAchievementGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:900px){
  body.predictionLabPage .plFirstRunGuide{
    grid-template-columns:1fr;
    gap:5px;
    padding:11px;
  }
  body.predictionLabPage .plFirstRunGuide__intro{max-width:none}
  body.predictionLabPage .plFirstRunStep{
    border-left:0;
    border-top:1px solid #24445c;
    padding:8px 0 3px;
  }
  body.predictionLabPage .plFirstRunGuide .plButton{width:100%}
}