/* /portalis/morphogenics — Portalis Morphogenics' specimen breeder, in
   Portalis OS (os.css): a task pane, then the work, the specimen and its
   log beside the litter and the genome. the pads are dark wells the
   holograms are raymarched into. */

.mg {
  width: min(1180px, calc(100% - 32px));
  margin: 3.4em auto 2.5em;
}
.mg__body { display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.mg__work { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; padding: 12px; }
.mg__tasks a[aria-disabled] { color: var(--os-sh); cursor: not-allowed; }
.mg__det p { margin: 0 0 5px; }
.mg__det b { font-weight: bold; }
.mg__det span { font-family: vtFont, "Courier New", monospace; font-size: 14px; }

.mg__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.mg__logo { flex: none; }
.mg__brand { margin: 0; font: 22px/1 vtFont, "Courier New", monospace; color: var(--os-t1); }
.mg__by { margin: 3px 0 0; font-size: 11px; color: var(--os-dk); }

.mg__pad {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: radial-gradient(ellipse at 50% 85%, #0f4352, #04141b 70%);
  box-shadow: inset 1px 1px 0 var(--os-dk), inset -1px -1px 0 #fff;
}
.mg__pad--big { cursor: grab; touch-action: none; }
.mg__stage { position: relative; }
/* the caption on the bare projector between specimens */
.mg__xfer {
  position: absolute;
  left: 0;
  right: 0;
  top: 38%;
  margin: 0;
  text-align: center;
  font: 18px vtFont, "Courier New", monospace;
  letter-spacing: .08em;
  color: #7fe9f5;
  text-shadow: 0 0 8px rgba(69, 240, 255, .6);
  animation: mg-blink 1s steps(2) infinite;
  pointer-events: none;
}
.mg__xfer[hidden] { display: none; }
.mg__pad--big:active { cursor: grabbing; }
.mg__acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
/* a toggle: pressed in while on */
.mg__rot { margin-left: auto; }
.mg__rot[aria-pressed="true"] { background: linear-gradient(#dcdfd7, #eceee8); box-shadow: inset 1px 1px 0 var(--os-sh), inset 0 0 0 1px var(--os-gold2); }

.mg__h { margin: 0 0 6px; padding: 0; background: none; font: bold 12px var(--os-ui); color: var(--os-t1); text-shadow: none; }
.mg .os-status { background: var(--os-face); }
.mg__litter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.mg__kid { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.mg__kid:hover .mg__pad,
.mg__kid:focus-visible .mg__pad { outline: 2px solid var(--os-gold); outline-offset: -2px; }
.mg__kid:focus-visible { outline: none; }
/* a pad sequencing while the litter breeds: the old picture dimmed, a bar of
   light sweeping down it, the word in the corner blinking */
.mg__kid.busy { cursor: progress; overflow: hidden; }
.mg__kid.busy .mg__pad { filter: brightness(.3) saturate(.5); transition: filter .15s; }
.mg__kid.busy .mg__how { visibility: hidden; }
.mg__kid.busy::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  background: linear-gradient(transparent, rgba(69, 240, 255, .28) 85%, rgba(160, 250, 255, .8));
  animation: mg-sweep .9s linear infinite;
  pointer-events: none;
}
.mg__kid.busy::after {
  content: "Sequencing_";
  position: absolute;
  left: 4px;
  bottom: 3px;
  font: 13px vtFont, "Courier New", monospace;
  color: #7fe9f5;
  animation: mg-blink 1s steps(2) infinite;
  pointer-events: none;
}
.mg__kid:disabled { cursor: progress; }
@keyframes mg-sweep { from { transform: translateY(-100%); } to { transform: translateY(460%); } }
@keyframes mg-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .mg__kid.busy::before { animation: none; opacity: .5; }
}
.mg__how { position: absolute; left: 3px; bottom: 2px; font: 10px var(--os-ui); color: #7fb3bd; pointer-events: none; }

/* the genome: a helix of the whole strand in a dark well like the pads,
   the life genes as meters, then a sequence viewer, a gene a row: its
   number, its op (grey if it does nothing), its sixteen bases in the
   chromatogram's colours. what changed since the parent: new genes barred
   in cyan, changed bases on gold, lost ones as a struck line */
.mg__dna { display: flex; flex-direction: column; gap: 6px; }
.mg__helix {
  display: block;
  width: 100%;
  height: 52px;
  background: radial-gradient(ellipse at 50% 120%, #0f4352, #04141b 75%);
  box-shadow: inset 1px 1px 0 var(--os-dk), inset -1px -1px 0 #fff;
}
.mg__life { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 11px; }
.mg__meter { display: flex; flex-direction: column; gap: 2px; }
.mg__meter > span { display: flex; justify-content: space-between; color: var(--os-dk); }
.mg__meter > span b { color: var(--os-t2); font-weight: normal; }
.mg__meter.on > span b { color: var(--os-gold2); font-weight: bold; }
.mg__bar { height: 7px; background: #fff; box-shadow: inset 1px 1px 0 var(--os-sh), inset -1px -1px 0 #fff; }
.mg__bar > i { display: block; height: 100%; background: linear-gradient(var(--os-pane2), var(--os-t2)); }
.mg__meter.on .mg__bar > i { background: linear-gradient(#fff3c4, var(--os-gold) 50%, var(--os-gold2)); }
.mg__chg { margin: 0; min-height: 1.3em; font-size: 11px; color: var(--os-dk); }
.mg__chg b { color: var(--os-t1); }
.mg__seq {
  margin: 0;
  padding: 3px 0;
  max-height: 15em;
  overflow: auto;
  list-style: none;
  background: #fff;
  box-shadow: inset 1px 1px 0 var(--os-sh), inset -1px -1px 0 #fff;
  font: 13px/1.3 vtFont, "Courier New", monospace;
}
.mg__seq li { display: flex; gap: 8px; padding: 0 6px 0 4px; border-left: 3px solid transparent; white-space: nowrap; }
.mg__seq li:hover { background: var(--os-pane1); }
.mg__seq > li::before { content: none; }
.mg__seq .n { width: 2ch; color: var(--os-sh); text-align: right; }
.mg__seq .op { width: 8ch; color: var(--os-t1); }
.mg__seq .bs i { font-style: normal; }
.mg__seq .bs i:nth-child(4n):not(:last-child) { margin-right: .6ch; }
.mg__seq .A { color: #23955a; }
.mg__seq .C { color: #2463c9; }
.mg__seq .G { color: #b07408; }
.mg__seq .T { color: #c23a30; }
.mg__seq .bs i.m { background: #ffe9a8; box-shadow: 0 1px 0 var(--os-gold2); }
.mg__seq li.off .op,
.mg__seq li.off .bs { opacity: 0.4; }
.mg__seq li.new { border-left-color: var(--os-t3); background: #effcfd; }
.mg__seq li.mut { border-left-color: var(--os-gold); }
.mg__seq li.del { color: #a5563f; text-decoration: line-through; font-size: 12px; }
.mg__seq li.del .n { text-decoration: none; }

/* the lab log: a sunken list, newest at the bottom, the time in the margin;
   notes in italics, the ones that matter in gold */
.mg__log {
  margin: 0;
  padding: 4px 6px;
  height: 9.5em;
  overflow: auto;
  list-style: none;
  background: #fff;
  box-shadow: inset 1px 1px 0 var(--os-sh), inset -1px -1px 0 #fff;
  font-size: 11px;
  line-height: 1.4;
}
.mg__log > li { display: flex; gap: 8px; }
.mg__log > li::before { content: none; }
.mg__log time { flex: none; color: var(--os-sh); font-family: vtFont, "Courier New", monospace; font-size: 13px; line-height: 1.1; }
.mg__log li.note { color: var(--os-dk); font-style: italic; }
.mg__log li.warn { color: #8a5a00; }
.mg__log li.warn::after { content: none; }
.mg__log li.warn span { box-shadow: inset 0 -.45em 0 rgba(242, 193, 78, .35); }
.mg__acts + .mg__h { margin-top: 12px; }

/* the tasks' dialog: the link in a field, the report's form */
.mg__dlg label { font-weight: bold; }
.mg__url, .mg__in { width: 100%; box-sizing: border-box; margin-top: 3px; }
.mg__url { font-size: 12px; }
.mg__in { resize: vertical; }
.mg__dlg .mg__fine { font-size: 11px; color: var(--os-dk); }

@media (max-width: 960px) {
  .mg__body { grid-template-columns: minmax(0, 1fr); }
  .mg__tasks { order: 2; }
}
@media (max-width: 700px) {
  .mg__work { grid-template-columns: minmax(0, 1fr); }
}