/* META-UX (ui/launch.js, ui/goals.js, ui/codex.js): the launch's star chart, run length, doctrine and finish, the next
 * ships; the pinned goal; the coverage strip; the Codex's Ships and Sectors tabs and recipe graph. Every rule is scoped to
 * an mx- class. Colours: the page's tokens (styles.css), bronze for what you have, cyan for what a card would add, gold
 * only for rewards (a goal done, a union), and a hue per sector clear of every reserved one (build spec 0.4). */

/* ---- shared: glyphs, lines, bars ---- */
.mx-gl{width:16px;height:16px;flex:none;fill:currentColor;vertical-align:-3px}
.panel p.mx-line{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--dim);text-align:left}
.panel p.mx-line.lock{color:var(--faint)}
.panel p.mx-hint{margin:0 0 10px;font-size:13px}
.mx-bar{display:block;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--cyan) var(--p,0%),rgba(140,150,220,.18) var(--p,0%));margin:5px 0 2px}
.mx-lab{font:8px/1.3 var(--pix);letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.mx-hull{image-rendering:auto;flex:none}
/* a ship not revealed yet: its hull as a dark shape, rimmed in ice light (never an empty box) */
.mx-sil{filter:brightness(0) drop-shadow(0 0 1px rgba(143,211,255,.9)) drop-shadow(0 0 7px rgba(143,211,255,.35));opacity:.95}

/* ---- the sectors' hues (the chart, the Codex) ---- */
.mx-star,.mx-sic{--c:#9fb0d8}
.mx-star[data-id="deep"],.mx-sic[data-id="deep"]{--c:#8fd3ff}
.mx-star[data-id="belt"],.mx-sic[data-id="belt"]{--c:#c8b08a}
.mx-star[data-id="nebula"],.mx-sic[data-id="nebula"]{--c:#5fd6c0}
.mx-star[data-id="hive"],.mx-sic[data-id="hive"]{--c:#f0a868}

/* ---- the launch: the sector chart and the run's length (#lSector) ---- */
.mx-exp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 22px;text-align:left;margin-bottom:6px}
.mx-col{min-width:0}
.mx-chart{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin}
.mx-star{display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto;width:92px;padding:7px 4px 6px;border-radius:12px;border:2px solid var(--line2);
  background:rgba(255,255,255,.03);color:var(--c);text-align:center;transition:border-color .12s,background-color .12s}
.mx-star .mx-gl{width:26px;height:26px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 55%,transparent))}
.mx-star .nm{font-size:13px;font-weight:700;line-height:1.15;color:var(--ink)}
.mx-star small{font:7px/1.2 var(--pix);letter-spacing:.04em;color:var(--dim)}
.mx-star.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 22%,transparent)}
.mx-star.lock{color:var(--faint);border-style:dashed}
.mx-star.lock .mx-gl{filter:none}
.mx-star.lock .nm{color:var(--dim)}
button.mx-star:hover,button.mx-star:focus-visible{border-color:var(--cyan);outline:none}
.mx-star.still{cursor:default}
/* the route between two stars: lit once the next one is open */
.mx-hop{flex:1 0 14px;max-width:48px;align-self:center;margin-top:-18px;height:0;border-top:2px dashed var(--line)}
.mx-hop.open{border-top-style:solid;border-color:rgba(143,211,255,.55)}
.mx-len{min-width:170px}
.mx-lenrow{justify-content:flex-start}
.mx-lenrow .chip{font:11px/1 var(--pix);min-width:72px;justify-content:center}
.mx-len .mx-line{max-width:250px}

/* ---- the launch: the ship's doctrine and finish, the next ships (#lExtra) ---- */
.mx-kit,.mx-next,.mx-covbox{text-align:left}
.mx-kit .xrow,.mx-quick,.mx-gbtn,.mx-tbtn{justify-content:flex-start}
.mx-kit .mx-fin{margin-top:8px}
.chip.mx-lock{border-style:dashed;color:var(--faint)}
.chip .mx-gl{width:12px;height:12px}
.mx-teasers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mx-tease{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px;border-radius:12px;border:1px solid var(--line2);
  background:radial-gradient(circle at 12% 30%,rgba(143,211,255,.08),transparent 60%),rgba(255,255,255,.03)}
.mx-tease .mx-hull{max-width:76px;max-height:76px;width:auto;height:auto}
.mx-tt .nm{display:block;font:10px/1.4 var(--pix);font-weight:400;color:var(--bronze)}
.panel p.mx-promise{margin:3px 0 4px;font-size:14px;line-height:1.35;color:var(--ink)}
.mx-rev{display:block;font-size:12px;color:var(--dim);line-height:1.3}
.mx-tbtn{margin-top:6px;gap:6px}
.mx-tbtn .chip{min-height:32px;font-size:12px}
.panel p.mx-horizon{margin:8px 0 0;font-size:13px;color:var(--faint);font-style:italic;text-align:center}

/* ---- the title: the 15-minute run ---- */
.mx-short .btn.mx-15{min-height:46px;padding:0 22px;font-size:16px;border-color:rgba(143,211,255,.45)}
.panel p.mx-cap,.tbox p.mx-cap{margin:-4px auto 0;max-width:420px;font-size:13px;line-height:1.35;color:var(--dim);text-align:center}

/* ---- coverage: five roles, each its own shape ---- */
.mx-cov{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mx-role{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:600}
.mx-role.on{color:var(--bronze);border-color:rgba(243,196,142,.6);background:rgba(243,196,142,.1)}
.mx-role.gap{color:var(--faint);border-style:dashed;background:none}
.mx-role.gap .mx-gl{fill:none;stroke:currentColor;stroke-width:1.4}
.mx-role.fill{color:var(--cyan);border-color:rgba(61,242,255,.6)}
.mx-covbox .mx-cov{justify-content:flex-start}
.mx-covbox.mx-lvl .mx-cov{justify-content:center}
.mx-covbox.mx-lvl .mx-line{text-align:center}
.mx-covbox h3{text-align:left}
.mx-croles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-top:2px}
.mx-cr{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;color:var(--dim);background:rgba(255,255,255,.05)}
.mx-cr .mx-gl{width:14px;height:14px}
.mx-cr.fill{color:#021014;background:var(--cyan);box-shadow:0 0 10px rgba(61,242,255,.45)}
.mx-croles em{font:7px/1 var(--pix);font-style:normal;letter-spacing:.04em;color:var(--cyan)}

/* ---- the pinned goal (title, launch, Codex, results) ---- */
.mx-gbox:empty{display:none}
.mx-goal{display:grid;gap:3px;padding:10px 12px;border-radius:12px;border:1px solid rgba(61,242,255,.35);background:rgba(61,242,255,.05);text-align:left}
.mx-gh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.mx-tag{font:7px/1.4 var(--pix);letter-spacing:.08em;color:var(--cyan)}
.mx-goal .nm{font-size:15px;font-weight:700;color:var(--ink)}
.mx-gt{font-size:13px;color:var(--dim)}
.mx-gp{font-size:12px;color:var(--cyan)}
.mx-goal p.mx-fit{display:flex;align-items:center;gap:6px;margin:3px 0 0;font-size:13px;line-height:1.35}
.mx-goal p.mx-fit.ok{color:var(--green)}
.mx-goal p.mx-fit.no{color:var(--orange)}
.mx-gbtn{gap:6px;margin-top:4px}
.mx-gbtn .chip{min-height:32px;font-size:12px}
.mx-goal.done{border-color:rgba(255,225,77,.45);background:rgba(255,225,77,.06)}
.mx-goal.done p.mx-fit.ok{color:var(--yellow)}
.tbox .mx-goal{max-width:520px;margin:0 auto;width:100%}
/* the Codex's quest rows: a Pin button at the right; the pinned row outlined */
.qlist li.mx-pinrow{position:relative;padding-right:86px}
.mx-pinb{position:absolute;top:6px;right:8px;min-height:30px;padding:0 10px;font-size:12px}
.qlist li.mx-pinned{border-color:rgba(61,242,255,.55);background:rgba(61,242,255,.05)}
.mx-pinb[aria-pressed="true"]{color:var(--cyan);border-color:rgba(61,242,255,.6);background:rgba(61,242,255,.08)}
.mx-stag{font:7px/1.5 var(--pix);letter-spacing:.05em;color:var(--bronze);text-transform:uppercase}
/* the results: what the run did for the goal, then what to pin next */
.mx-rgoal{display:grid;gap:6px;text-align:left}
.mx-rgoal h3{margin:0}
.mx-quick{gap:6px}
.mx-quick .chip{min-height:32px;font-size:12px;max-width:100%}

/* ---- the Codex: the recipe graph and the catalysts ---- */
.mx-graph{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:5px}
.mx-rec{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--line2)}
.mx-rec.off{opacity:.6}
.mx-rec.union{border-color:rgba(255,225,77,.3)}
.mx-rec.union.off{border-color:var(--line2)}
.mx-node{--c:var(--dim);display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:1px 8px 1px 3px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:color-mix(in srgb,var(--c) 8%,transparent);font-size:12px;font-weight:600;color:var(--ink);max-width:100%}
.mx-node img{max-width:24px;max-height:24px;width:auto;height:auto}
.mx-node .q{width:22px;height:22px;font-size:9px}
.mx-node.off{border-style:dashed;color:var(--faint);background:none}
.mx-node.cat{border-radius:6px}
.mx-node.evo:not(.off){box-shadow:0 0 10px color-mix(in srgb,var(--c) 30%,transparent)}
.mx-node.union:not(.off){border-color:var(--yellow);box-shadow:0 0 0 1px rgba(255,225,77,.25),0 0 14px rgba(255,201,74,.25)}
.mx-op{font:10px/1 var(--pix);color:var(--faint)}
.mx-rtext{flex-basis:100%;font-size:12px;color:var(--dim);line-height:1.3}
.mx-rtext.lock{color:var(--faint)}
.mx-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:5px}
.mx-more{font-size:13px;color:var(--faint);font-style:italic}
.mx-cat.off{opacity:.7}
.mx-cat{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line2)}
.mx-catw{display:flex;flex-wrap:wrap;gap:4px}

/* ---- the Codex: ships, sectors, mastery ---- */
.cx.mx-shipx,.cx.mx-secx{grid-template-columns:64px minmax(0,1fr)}
.mx-pic{display:grid;place-items:center;min-height:56px}
.mx-pic .mx-hull{max-width:64px;max-height:64px;width:auto;height:auto}
.cx.mx-shipx.on{border-color:rgba(243,196,142,.6)}
.cx.mx-shipx.hidden,.cx.mx-shipx.dev{background:rgba(255,255,255,.02)}
.cx .mx-promise{font-style:italic}
.cx p.mx-tip{color:var(--cyan);opacity:.85}
.mx-mast,.mx-ms{--c:var(--green)}
.mx-mast{margin-top:6px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.03)}
.mx-mh{display:flex;align-items:center;gap:8px}
.mx-mh small{margin-left:auto}
.mx-mq{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px}
.mx-mq li{display:grid;font-size:12px;line-height:1.3}
.mx-mq li b{font-size:12px}
.mx-mq li span{color:var(--dim)}
.mx-mq li.done b{color:var(--green)}
.mx-sic{display:grid;place-items:center;height:56px;color:var(--c)}
.mx-sic .mx-gl{width:36px;height:36px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 50%,transparent))}
.mx-secx.lock .mx-sic{color:var(--faint)}
.mx-secx.lock .mx-sic .mx-gl{filter:none}
.cx p.mx-recs{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.mx-bt{font-variant-numeric:tabular-nums;font-size:12px;padding:1px 6px;border-radius:6px;background:rgba(143,211,255,.08)}
.mx-chart.still{justify-content:center;margin:0 0 10px}
.mx-mastery{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.mx-ms{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03);font-size:12px}
.mx-ms img{max-width:22px;max-height:22px;width:auto;height:auto}
.mx-ms.full{border-color:rgba(255,225,77,.45)}

/* ---- narrow and short screens ---- */
@media (max-width:640px){
  .mx-exp{grid-template-columns:1fr}
  .mx-len .mx-line{max-width:none}
  .mx-star{width:66px;padding:6px 2px 5px}
  .mx-star .nm{font-size:11px}
  .mx-star .mx-gl{width:22px;height:22px}
  .mx-hop{flex-basis:8px}
  .mx-teasers{grid-template-columns:1fr}
  .mx-graph,.mx-cats{grid-template-columns:1fr}
  .qlist li.mx-pinrow{padding-right:10px;padding-bottom:40px}
  .mx-pinb{top:auto;bottom:6px}
}
@media (max-height:560px){
  .mx-star{padding:5px 4px}
  .mx-star .mx-gl{width:20px;height:20px}
  .mx-tease .mx-hull{max-width:56px;max-height:56px}
  .panel p.mx-cap,.tbox p.mx-cap{display:none}
}