/* Research Lab bay (views/research.js): the era ladder pinned over the list, a section per era, a card per tech.
   The Science Lab's violet lights what is open and what can start; the one motion is an era unsealing. */

[data-bay="research"]{
  --rs:#a98bff;                       /* the Science Lab's accent — starbase.css `.sb-ico-scienceLab` */
  --rs-line:rgba(169,139,255,.55);
  --rs-soft:rgba(169,139,255,.24);
  --rs-well:rgba(169,139,255,.08);
  --rs-sealed:#5f86a8;
}

.rs{display:flex;flex-direction:column;gap:20px;padding-right:6px}

/* ── The ladder ───────────────────────────────────
   A plate per era (numeral, name, two keys), a conduit lit up to the last open era, the era in view marked current. */
.rs-ladder{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:stretch;
  margin-bottom:-6px;padding:2px 0 12px;
  border-bottom:1px solid var(--u-line-soft);
  background:#081429;
  box-shadow:0 10px 14px -12px rgba(0,0,0,.8);
}
.rs-era{
  flex:1 1 0;min-width:0;container-type:inline-size;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"num name" "num keys";
  align-items:center;gap:5px 10px;
  padding:9px 12px 10px;
  border:1px solid var(--u-line-soft);border-radius:var(--u-r);
  background:var(--u-well);color:var(--u-body);
  font:inherit;text-align:left;cursor:pointer;
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.rs-era-num{
  grid-area:num;min-width:1.5em;text-align:center;
  font:700 22px/1 var(--u-font-ui);color:var(--rs-sealed);
}
.rs-era-name{grid-area:name;font:600 14px/1.15 var(--u-font-ui);color:var(--u-value)}
/* A plate too narrow for its era's name keeps the numeral; the era's heading below still names it. */
@container (width < 66px){.rs-era-name{display:none}}
.rs-era>.rs-keys{grid-area:keys}
.rs-era:hover{border-color:var(--rs-line)}
.rs-era.is-open{border-color:var(--rs-soft);background:var(--rs-well)}
.rs-era.is-open .rs-era-num{color:var(--rs)}
.rs-era.is-next{border-style:dashed;border-color:var(--rs-soft);background:transparent}
.rs-era.is-next .rs-era-num{color:var(--u-label)}
.rs-era.is-sealed{background:transparent}
.rs-era.is-sealed .rs-era-name{color:var(--u-label)}
.rs-era[aria-current]{box-shadow:inset 0 -2px 0 var(--rs)}
.rs-era.is-open[aria-current]{border-color:var(--rs-line)}

.rs-conduit{
  flex:0 0 16px;align-self:center;height:2px;
  background:repeating-linear-gradient(90deg,var(--rs-sealed) 0 3px,transparent 3px 6px);opacity:.55;
}
.rs-conduit.is-lit{background:var(--rs);opacity:1;box-shadow:0 0 8px var(--rs-line)}

/* An era opened since the ladder was last drawn: the plate flares twice. */
@keyframes rsUnseal{
  0%  {box-shadow:0 0 0 0 rgba(169,139,255,0)}
  30% {box-shadow:0 0 0 2px var(--rs),0 0 26px rgba(169,139,255,.6)}
  100%{box-shadow:0 0 0 0 rgba(169,139,255,0)}
}
.rs-era.is-fresh{animation:rsUnseal 1.3s ease-out 2}

/* ── Keys ─────────────────────────────────────────
   An era's two requirements as diamond slots: filled when held, hollow when not, dashed with no scientist to measure. */
.rs-keys{display:flex;flex-wrap:wrap;gap:3px 10px}
.rs-key{
  display:inline-flex;align-items:center;gap:6px;
  font:600 11px/1.25 var(--u-font-ui);font-variant-numeric:tabular-nums;
  color:var(--u-label);white-space:nowrap;
}
.rs-key::before{
  content:'';flex:0 0 auto;width:6px;height:6px;
  border:1.5px solid currentColor;border-radius:1px;transform:rotate(45deg);
}
.rs-key.is-met{color:var(--rs)}
.rs-key.is-met::before{background:var(--rs);box-shadow:0 0 6px var(--rs-line)}
.rs-key.is-unknown::before{border-style:dashed}

/* ── The no-scientist notice ─────────────────── */
.rs-notice{
  margin:0;padding:10px 13px;
  border:1px solid rgba(255,200,68,.38);border-radius:var(--u-r-sm);
  background:rgba(255,200,68,.06);
  font:400 13px/1.45 var(--u-font-ui);color:var(--u-body);
}
.rs-notice b{font-weight:600;color:var(--u-warn)}

/* ── An era ───────────────────────────────────────
   Lands just under the ladder when its plate is clicked (`--rs-ladder-h` is measured by the view). */
.rs-sec{display:flex;flex-direction:column;gap:11px;scroll-margin-top:calc(var(--rs-ladder-h,0px) + 4px)}
.rs-sec-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  padding-bottom:8px;border-bottom:1px solid var(--u-line-soft);
}
.rs-sec-num{min-width:1.6em;font:700 16px/1 var(--u-font-ui);color:var(--rs)}
.rs-sec-name{margin:0;font:700 19px/1.2 var(--u-font-ui);color:var(--u-value)}
.rs-sec-head>.rs-keys{margin-left:auto;gap:3px 14px}
.rs-sec-head .rs-key{font-size:12px}
.rs-sec:is(.is-next,.is-sealed) .rs-sec-num{color:var(--rs-sealed)}
.rs-sec.is-sealed .rs-sec-name{color:var(--u-body)}

/* What opens a sealed era. The next one to open is said in the lab's colour; the ones past it, quietly. */
.rs-seal{
  margin:0;padding:2px 0 2px 12px;
  border-left:2px solid var(--u-line-soft);
  font:400 13px/1.5 var(--u-font-ui);color:var(--u-label);max-width:72ch;
}
.rs-sec.is-next .rs-seal{border-left-color:var(--rs);color:var(--u-body)}

/* Researched techs, receded to ticks. */
.rs-done{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rs-done li{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:var(--u-r-sm);
  border:1px solid rgba(0,232,122,.2);background:rgba(0,232,122,.05);
  font:500 12px/1.3 var(--u-font-ui);color:#bde9d1;
}
.rs-done li::before{content:'✓';font-weight:700;color:var(--u-ok)}

/* ── Tech cards ───────────────────────────────── */
.rs-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
}
.rs-card{
  display:flex;flex-direction:column;gap:9px;min-width:0;
  padding:12px 13px 11px;
  border:1px solid var(--u-line-soft);border-radius:var(--u-r-sm);
  background:var(--u-well);
}
.rs-card.is-open{grid-column:1/-1}
.rs-card-head{display:flex;align-items:flex-start;gap:11px}
.rs-card-icon{
  flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--u-line-soft);border-radius:var(--u-r-sm);
  color:var(--u-label);
}
.rs-card-icon svg{width:28px;height:28px}
.rs-card-titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rs-card-name{margin:0;font:600 15px/1.25 var(--u-font-ui);color:var(--u-value);overflow-wrap:anywhere}
.rs-card-effect{font:500 13px/1.35 var(--u-font-ui);color:var(--u-line);overflow-wrap:anywhere}
.rs-card .u-blocked{margin-top:0}
.rs-card .u-job{padding:8px 10px;gap:7px;border-color:var(--rs-soft)}
.rs-card .u-meter>span{background:linear-gradient(90deg,#6c55cc,var(--rs))}
.rs-paused{display:flex;flex-direction:column;gap:6px}
/* The price on the left, the time it takes on the right — two facts, never one wrapped line. */
.rs-cost{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.rs-cost>.bay-cost:empty{display:none}
.rs-time{
  display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  font:600 12px/1.3 var(--u-font-ui);font-variant-numeric:tabular-nums;color:var(--u-label);white-space:nowrap;
}
.rs-time svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
/* Pinned to the card's foot, so a row of cards lines its controls up. */
.rs-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}
.rs-more{
  margin-left:auto;padding:6px 2px;
  appearance:none;background:none;border:0;cursor:pointer;
  font:600 12px/1.2 var(--u-font-ui);color:var(--u-label);
  text-decoration:underline;text-decoration-color:var(--u-line-dim);text-underline-offset:3px;
}
.rs-more:hover{color:var(--u-value);text-decoration-color:currentColor}
.rs-card-more{display:flex;flex-direction:column;gap:10px;padding-top:10px;border-top:1px solid var(--u-line-soft)}
.rs-card-more .bay-desc{margin:0;max-width:72ch}

/* Ready to start: the lab's colour. Running: lit. Paused: holding. Waiting or sealed: receded. */
.rs-card.is-ready{border-color:var(--rs-soft);background:linear-gradient(180deg,var(--rs-well),transparent 75%),var(--u-well)}
.rs-card:is(.is-ready,.is-running,.is-paused,.is-blocked) .rs-card-icon{color:var(--rs);border-color:var(--rs-soft);background:var(--rs-well)}
.rs-card.is-running{border-color:var(--rs-line);box-shadow:0 0 0 1px var(--rs-soft),0 0 22px rgba(169,139,255,.16)}
.rs-card.is-paused{border-style:dashed;border-color:var(--rs-soft)}
.rs-card.is-sealed{opacity:.62}
.rs-card.is-sealed .rs-card-effect{color:var(--u-label)}

.rs-era:focus-visible,
.rs-more:focus-visible{outline:2px solid var(--rs);outline-offset:2px}

/* ── Reflow ───────────────────────────────────── */

/* Narrow: the plates stack their numeral over the name. */
@media (max-width:900px){
  .rs-era{grid-template-columns:minmax(0,1fr);grid-template-areas:"num" "name" "keys";justify-items:start;padding:8px 10px}
  .rs-era-num{min-width:0;text-align:left;font-size:18px}
  .rs-conduit{flex-basis:10px}
}

/* Short — the landscape phone: the ladder keeps numeral and name only (each era's heading spells its keys out), and
   the cards give back the height they spend on a desktop. */
@media (max-height:520px){
  .rs{gap:14px}
  .rs-ladder{padding-bottom:9px}
  .rs-era{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"num name";align-items:baseline;gap:0 7px;padding:6px 9px}
  .rs-era>.rs-keys{display:none}
  .rs-era-num{font-size:15px}
  .rs-era-name{font-size:12px}
  .rs-sec{gap:9px}
  .rs-sec-name{font-size:16px}
  .rs-sec-head{padding-bottom:6px}
  .rs-seal{font-size:12px}
  .rs-grid{gap:8px}
  .rs-card{padding:9px 10px;gap:7px}
  .rs-card-icon{flex-basis:30px;width:30px;height:30px}
  .rs-card-icon svg{width:23px;height:23px}
  .rs-card-name{font-size:14px}
  .rs-card-effect{font-size:12px}
}

@media (pointer:coarse){
  .rs-era{min-height:44px}
  .rs-more{min-height:44px;padding:0 8px}
}

@media (prefers-reduced-motion:reduce){
  .rs-era.is-fresh{animation:none}
  .rs-era,.rs-conduit{transition:none}
}